<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    h2 {
      width: 800px;
      margin: 20px auto;
      font-size: 35px;
      text-align: center;
    }

    section,
    th,
    caption {
      background-color: #f2dcab;
    }

    section {
      width: 800px;
      margin: auto;
      padding: 5px 20px;
      font-size: 18px;
      box-sizing: border-box;
    }

    section input {
      width: 180px;
      height: 20px;
    }

    section button {
      width: 80px;
      height: 25px;
      text-align: center;
    }

    table {
      width: 800px;
      margin: 0 auto;
      border-collapse: collapse;
    }

    table caption {
      padding: 5px 0;
      border-top: 1px solid #dcd39e;
      border-bottom: 1px solid #dcd39e;
    }

    thead th {
      padding: 10px;
    }

    tbody td {
      padding: 10px;
      text-align: center;
      border: 1px dashed #f2dcab;
    }
  </style>
</head>

<body>
  <h2>图书管理</h2>
  <section>
    编号: &nbsp;&nbsp;<input type="text" id="bookNum">
    名称: &nbsp;&nbsp;<input type="text" id="bookName">
    <button>提交</button>
  </section>
  <table>
    <caption></caption>
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>5</td>
        <td>三国演义</td>
        <td>2050-21-12 22:19:35</td>
        <td>
          <a href="jacvascript:void(0);" id="editor">修改</a>
          丨
          <a href="jacvascript:void(0);" id="delete">删除</a>
        </td>
      </tr> -->
    </tbody>
  </table>
  <script src="./js/jquery.js"></script>
  <script>
    $(function () {
      let isEditor = false
      let editorId = null
      $('#bookNum').attr('disabled', true)
      // alert(1)
      function getBookList() {
        let str = ''
        $.ajax({
          method: 'get',
          url: 'http://www.klxin.cn:3000/books',
          success(res) {
            let text = ''
            console.log(res)
            res.forEach(function (item) {
              str += `
              <tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${dateFormate(item.date)}</td>
                <td>
                  <a href="jacvascript:void(0);" id="editor" data-id="${item.id}">修改</a>丨
                  <a href="jacvascript:void(0);" id="delete" data-id="${item.id}">删除</a>
                </td>
              </tr>
              `
            })
            // console.log(str)
            $('tbody').html(str)
            text = `图书总数: ${res.length}`
            $('caption').html(text)
          }
        })
      }
      function dateFormate(value) {
        let time = new Date(value)
        let y = time.getFullYear()
        let m = (time.getMonth() + 1).toString().padStart(2, '0')
        let d = time.getDate().toString().padStart(2, '0')
        let hh = time.getHours().toString().padStart(2, '0')
        let mm = time.getMinutes().toString().padStart(2, '0')
        let ss = time.getSeconds().toString().padStart(2, '0')
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
      }
      function addBook(bookName, isEditor) {
        // console.log(bookName)
        $.ajax({
          method: 'post',
          url: 'http://www.klxin.cn:3000/books',
          data: { name: bookName },
          success(res) {
            console.log(res)
            getBookList()
          }
        })
      }
      function deleteBookById(id) {
        console.log(id)
        $.ajax({
          method: 'delete',
          url: 'http://www.klxin.cn:3000/books/' + id,
          success(res) {
            if (res.status === 200) {
              getBookList()
              return alert('删除成功!')
            }
            return alert('删除失败')
          }
        })
      }
      function searchBookById(id) {
        $.ajax({
          method: 'get',
          url: 'http://www.klxin.cn:3000/books/' + id,
          success(res) {
            $('#bookName').val(res.name)
            $('#bookNum').val(res.id)
          }
        })
      }
      function isOnlyBook(name, callback) {
        $.ajax({
          method: 'get',
          url: 'http://www.klxin.cn:3000/books/book/' + name,
          success(res) {
            if (res.status === 1) {
              callback(true)
            } else {
              callback(false)
            }
          }
        })
      }
      function editorBook(id, bookName) {
        console.log(id)
        $.ajax({
          method: 'put',
          url: 'http://www.klxin.cn:3000/books/' + id,
          data: { name: bookName },
          success(res) {
            console.log(res)
            if (res.status === 200) {
              getBookList()
            }
          }
        })
      }
      $('button').on('click', function () {
        if ($('#bookName').val().trim().length === 0) {
          return alert('图书编号和图书的名字不能为空!')
        }
        let bookName = $('#bookName').val().trim()
        isOnlyBook(bookName, function (res) {
          if (res) {
            $('#bookName').val('')
            $('#bookNum').val('')
            return alert('书名已经存在!')
          } else {
            if (isEditor) {
              $('#bookName').val('')
              $('#bookNum').val('')
              isEditor = false
              return editorBook(editorId, bookName)
            }
            addBook(bookName)
            $('#bookName').val('')
            $('#bookNum').val('')
          }
        })
      })
      $('table').on('click', '#delete', function () {
        let id = $(this).attr('data-id')
        isEditor = true
        // console.log(id)
        deleteBookById(id)
        $('#bookName').val('')
        $('#bookNum').val('')
      })
      $('table').on('click', '#editor', function () {
        isEditor = true
        let id = $(this).attr('data-id')
        editorId = id
        searchBookById(id)
      })
      getBookList()
    })
  </script>
</body>

</html>